<template>
    <div class="container">
        <div class="handle-box">
            <span style="padding: 8px">会员/标题名称：</span>
            <el-input v-model="query.title" placeholder="会员/标题" class="handle-input mr10"></el-input>
            <span style="padding: 8px"></span>
            <el-button type="success" icon="el-icon-search" size="medium" @click="handleSearch">搜索</el-button>
            <el-button type="warning" size="medium" icon="el-icon-refresh-left" @click="resultClick()">重置</el-button>
        </div>
        <!-- <div style="padding:10px;">
          <el-button
              type="danger"
              icon="el-icon-delete"
              size="medium"
              @click="delAllSelection"
          >批量删除</el-button>
      </div> -->
        <el-table
            :data="tableData"
            border
            ref="multipleTable"
            header-cell-class-name="table-header"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column label="序号" align="center" width="100" fixed>
                <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
            </el-table-column>
            <el-table-column label="会员姓名" align="center">
                <template slot-scope="scope">{{ scope.row.nickname }}</template>
            </el-table-column>
            <el-table-column label="标题" align="center">
                <template slot-scope="scope">{{ scope.row.square_title }}</template>
            </el-table-column>
            <el-table-column label="内容" align="center">
                <template slot-scope="scope">
                    <img
                        style="width: 40px; height: 40px"
                        :src="docLoadPath + item.content"
                        :key="index"
                        v-for="(item, index) in scope.row.square_information"
                        alt=""
                    />
                </template>
            </el-table-column>
            <el-table-column label="点赞人数" align="center">
                <template slot-scope="scope">{{ scope.row.square_like_user.length }}</template>
            </el-table-column>
            <el-table-column label="会员类型" align="center">
                <template slot-scope="scope">{{ scope.row.vip_title }}</template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">{{ scope.row.square_create_time | formDate }}</template>
            </el-table-column>
            <el-table-column label="操作" width="240" align="center">
                <template slot-scope="scope">
                    <el-button @click="createBus(scope.row)" type="text" size="small">点赞列表</el-button>
                    <el-button @click="handleDelete(scope.row)" type="text" size="small" icon="el-icon-delete" class="red">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                :current-page="query.pageIndex"
                :page-size="query.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
        <!-- 添加修改教练弹框 -->
        <el-dialog title="点赞列表" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false" top="2%">
            <el-table
                :data="square_like_user"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column label="序号" align="center" width="100" fixed>
                    <template slot-scope="scope">{{ scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column label="头像" align="center">
                    <template slot-scope="scope">
                        <img
                            style="width: 40px; height: 40px"
                            :src="docLoadPath + (scope.row.headimgurl?scope.row.headimgurl:scope.row.avatarUrl)"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="会员姓名" align="center">
                    <template slot-scope="scope">{{ scope.row.nickname ||scope.row.wechat_nickname}}</template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api/index';
import { getdate } from '@/utils/utils';
export default {
    name: 'financeList',
    data() {
        return {
          square_like_user:[],
            exhibition_id: '',
            docLoadPath: api.IMG_PATH,
            query: {
                pageIndex: 1,
                pageSize: 10,
                title: '',
                cate: []
            },
            zzTypeist: [],
            pageTotal: 0,
            tableData: [],
            fId: '',
            f_text: '',
            fTextModel: false,
            dialogVisible: false,
        };
    },
    filters: {
        toFixedFile: function (val) {
            if (!val) return '0.00';
            return Number(val).toFixed(2);
        },
        formDate: (val) => {
            if (!val) return '';
            return getdate(val);
        }
    },
    mounted() {
        this.initAjaxMethod();
    },

    methods: {
        //打回
        refuseMethod(data) {
            this.f_text = '';
            this.fTextModel = true;
            this.fId = data.id;
        },
        saveEdit() {
            if (!this.f_text && this.f_text == '') {
                this.$message.error('请填写合同打回原因');
                return false;
            } else {
                this.refuseAjax();
            }
        },
        //删除
        handleDelete(data) {   
            this.delAjaxMethod(data.square_list_id);
        },
        //编辑
        createBus(row) {
            // this.$router.push({ path: '/articleAdd', query: {id:row.id, type: 2}})
            this.square_like_user=row.square_like_user;
            this.dialogVisible=true;
        },
        resultClick() {
            this.query.title = '';
            this.query.store = '';
            this.query.pageIndex = 1;
            this.initAjaxMethod();
        },
        createMethod() {
            this.$router.push({ path: '/articleAdd', query: { type: 1 } });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            let arr = [];
            if (this.multipleSelection.length <= 0) {
                this.$message({
                    type: 'error',
                    message: '请选择一个'
                });
                return false;
            } else {
                this.multipleSelection.forEach((item) => {
                    arr.push(item.id);
                });
                this.delAjaxMethod(arr.join(','));
            }
        },
        delAjaxMethod(ids) { 
            this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({ text: '加载中...' });
                this.$http
                    .post(api.SQUARE_DEL, {ids: ids})
                    .then((res) => {
                        loading.close();
                        console.log('项目列表', res);
                        if (res.code == 1) {
                            this.$message.success('删除成功');
                            this.query.pageIndex = 1;
                            this.initAjaxMethod();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    });
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.initAjaxMethod();
        },
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.initAjaxMethod();
        },
        initAjaxMethod() {
            let data = {
                pageIndex: this.query.pageIndex, //[string]	是	当前页
                pageSize: this.query.pageSize, //[string]	是	每页条数
                store: this.query.store, //[string]	是	付款名称
                cate: Array.isArray(this.query.cate) && this.query.cate.length > 0 ? this.query.cate[this.query.cate.length - 1] : ''
            };
            this.$http
                .post(api.SQUARE_INDEX, data)
                .then((res) => {
                    console.log('财务', res);
                    if (res.code == 1) {
                        this.tableData = Array.isArray(res.data.list) ? res.data.list : [];
                        this.pageTotal = res.data.total;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        }
    }
};
</script>

<style scoped>
.handle-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.el-input--small {
    display: initial;
}
.handle-input {
    width: auto;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.red {
    color: #f56c6c;
}
.green {
    color: #67c23a;
}
</style>